<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <!--顶部个人信息栏-->
    <image class="back-img-box" :mode="item.mode" :src="backImg"></image>
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!name" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="name" @click="handleToAvatar" :src="avatarImg" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">点击登录</view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u-title">{{ name }}</view>
            <view class="u-title-fu">{{ phone }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="menu-list">
      <view class="list-cell" @click="linkToPage('/packageA/pages/report/index')"
        v-if="userType === 1 || userType === 2">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="dashboardPath"></image>
          </view>
          <view class="til">报表管理</view>
        </view>
      </view>
      <view class="list-cell" @click="linkToPage('/packageA/pages/supplier/index')" v-if="supplierAuth">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="supplierPath"></image>
          </view>
          <view class="til">供应商管理</view>
        </view>
      </view>
      <view class="list-cell" @click="linkToPage('/packageA/pages/product/index')" v-if="productAuth">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="productPath"></image>
          </view>
          <view class="til">采购产品</view>
        </view>
      </view>
      <view class="list-cell" @click="linkToPage('/packageA/pages/adress/index')" v-if="addressAuth">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="locatPath"></image>
          </view>
          <view class="til">采购地址管理</view>
        </view>
      </view>
      <view v-if="customerAccountAuth && userType !== 0" class="list-cell"
        @click="linkToPage('/packageA/pages/customerAccount/index')">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="accountPath"></image>
          </view>
          <view>客户账户</view>
        </view>
      </view>
      <view class="list-cell" @click="linkToPage('/pages/blackList/index')" v-if="blackListsAuth && userType !== 0">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="blackListPath"></image>
          </view>
          <view class="til">黑名单管理</view>
        </view>
      </view>
      <!-- 
      <view class="list-cell" @click="openPrivacyContract">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="locatPath"></image>
          </view>
          <view>隐私及用户协议</view>
        </view>
      </view> -->
      <view class="list-cell" @click="linkToPage('/pages/mine/updatePwd/updatePwd')">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="passwordPath"></image>
          </view>
          <view>修改密码</view>
        </view>
      </view>
      <view class="list-cell" @click="handleLogout">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="logoutPath"></image>
          </view>
          <view>退出登录</view>
        </view>
      </view>
    </view>
    <!-- <custom-tabbar class="tabbar-box" :list="tabbarLists"></custom-tabbar> -->
    <view class="tabbar-box">
      <view v-for="(item,index) in tabbarLists" :key="index" class="my-tabbar"
        v-if="item.pagePath == '/pages/plans/index' ? (hasMenuPer && showPlanMenu) : !item.hidden">
        <view hover-class="none" class="weui-flex__item menu-item" @click="goToTab(item.pagePath)"
          :style="item.active? 'color: '+(item.selectedColor? item.selectedColor : selectedColor) : ''">
          <image :src="item.selectedIconPath" v-if="item.active" class="img"></image>
          <image :src="item.iconPath" v-if="!item.active" class="img"></image>
          <text class='tabbar_text'>{{item.text}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import storage from '@/utils/storage';
  import { getInfo } from '@/api/login';
  import { getButtonShow } from '@/utils/common.js';
  import { getBindWxStatus, getUnbindWx, getBindWx } from '@/api/me.js';
  import { getOpenId, getAccountIdentity, getPurchaseModel, getTenantId, getDriverId } from '@/utils/auth.js';
  import constant from '@/utils/constant';
  import { getBasisDeploy, getPurModel } from "@/api/system/user.js"
  import config from '@/config';
  export default {
    data() {
      return {
        showPlanMenu: false,
        name: this.$store.state.user.name,
        userType: getAccountIdentity(),//0装车工 
        hasMenuPer: true,
        tabbarLists: [
          {
            "pagePath": "/pages/index",
            "hidden": (getAccountIdentity() === 1 || getAccountIdentity() === 2) ? false : true,
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/index.png"),
            "selectedIconPath": require("static/images/tabbar/index_.png"),
            "text": "首页"
          },
          {
            "pagePath": "/pages/devices/index",
            "hidden": (getAccountIdentity() === 0) ? false : true,
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/device.png"),
            "selectedIconPath": require("static/images/tabbar/device_.png"),
            "text": "设备选择"
          },
          {
            "pagePath": "/pages/indexs",
            "hidden": (getAccountIdentity() === 1 || getAccountIdentity() === 2) ? false : true,
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/home.png"),
            "selectedIconPath": require("static/images/tabbar/home_.png"),
            "text": "排号"
          },
          {
            "pagePath": "/pages/plans/index",
            "hidden": false,
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/plan.png"),
            "selectedIconPath": require("static/images/tabbar/plan_.png"),
            "text": "计划"
          },
          {
            "pagePath": "/pages/waybill/index",
            "hidden": false,
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/work.png"),
            "selectedIconPath": require("static/images/tabbar/work_.png"),
            "text": "运单"
          },
          {
            "pagePath": "/pages/mine/index",
            "hidden": false,
            "active": true,
            "selectedColor": '#409EFE',
            "iconPath": require("static/images/tabbar/mine.png"),
            "selectedIconPath": require("static/images/tabbar/mine_.png"),
            "text": "我的"
          }
        ],
        selected: 3,
        isBindWx: '',
        dashboardAuth: false,
        dispatchingAuth: false,
        customerAccountAuth: false,
        blackListsAuth: false,
        authriotyFlagWaybill: false,
        authriotyFlagBlack: false,
        authriotyFlagViolation: false,
        menuItemCurViolation: undefined,
        menuItemCurWaybill: undefined,
        menuItemCurBlack: undefined,
        supplierAuth: false,
        productAuth: false,
        addressAuth: false,
      };
    },
    onPullDownRefresh() {
      wx.stopPullDownRefresh();
    },
    computed: {
      blackListPath() {
        return config.baseImgUrl + '/blackList.png';
      },
      avatar() {
        return this.$store.state.user.avatar;
      },
      windowHeight() {
        console.log('我的windowHeight~', uni.getSystemInfoSync());
        return uni.getSystemInfoSync().windowHeight - 50;
      },
      accountPath() {
        return config.baseImgUrl + '/account-icon.png';
      },
      dashboardPath() {
        return config.baseImgUrl + '/dashboard-icon.png';
      },
      supplierPath() {
        return config.baseImgUrl + '/supplier.png';
      },
      whitelPath() {
        return config.baseImgUrl + '/whitel.png';
      },
      productPath() {
        return config.baseImgUrl + '/product.png';
      },
      blackListPath() {
        return config.baseImgUrl + '/blackList.png';
      },
      configBoardPath() {
        return config.baseImgUrl + '/configBoard-icon.png';
      },
      locatPath() {
        return config.baseImgUrl + '/locat.png';
      },
      passwordPath() {
        return config.baseImgUrl + '/reset-password.png';
      },
      logoutPath() {
        return config.baseImgUrl + '/logout1.png';
      },
      backImg() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return config.baseImgUrl + '/profile_red.png';
        } else if (this.$store.state.user.curTypeColor == '#409EFE') {
          return config.baseImgUrl + '/profile_blue.png';
        } else {
          return config.baseImgUrl + '/profile_blue.png';
        }
      },
      avatarImg() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return config.baseImgUrl + '/user_.png';
        } else if (this.$store.state.user.curTypeColor == '#409EFE') {
          return config.baseImgUrl + '/user.png';
        } else {
          return config.baseImgUrl + '/user.png';
        }
      }
    },
    async onShow() {
      let purmodel = await getPurModel()
      if (purmodel.code == 0) {
        this.showPlanMenu = purmodel.data.purchaseBizMode == 1 ? true : false
      }
      let permissionsLists = [];
      let plists = await getInfo({
        enterId: getTenantId(),
        userId: getDriverId()
      });
      permissionsLists = plists?.data?.permissions || [];
      this.hasMenuPer = permissionsLists.some(
        (item) => item == 'plan:view'
      );
      this.getDashboardAuth();
      this.getWxStatus();
    },
    methods: {
      goToTab(url) {
        wx.switchTab({
          url: url  // 需要跳转的 tab 页路径
        })
      },
      async getDashboardAuth() {
        this.dashboardAuth = await getButtonShow('upper-station-dashboard');
        this.dispatchingAuth = await getButtonShow('dispatching-system-dashboard');
        this.customerAccountAuth = await getButtonShow('customerAccount:view');
        this.blackListsAuth = await getButtonShow('blackLists:view');
        this.supplierAuth = await getButtonShow('supplier:view');
        this.productAuth = await getButtonShow('purProduct:view');
        this.addressAuth = await getButtonShow('purchase:address');
      },
      async unindConfirm() {
        console.log('确定');
        try {
          let res = await getUnbindWx();
          console.log('getUnbindWx: ', res);
          if (res.code == 0) {
            this.isBindWx = false;
            uni.showToast({
              title: `解绑通过`
            });
          }
        } catch (e) {
          console.log(e, 'getUnbindWx');
          return false;
        }
      },
      async bindConfirm() {
        let data = getOpenId();
        try {
          let res = await getBindWx(data);
          console.log('getBindWx: ', res);
          if (res.code == 0) {
            this.$tab.switchTab('/pages/mine/index');
            uni.showToast({
              title: `绑定成功`
            });
            this.getWxStatus();
          }
        } catch (e) {
          console.log(e, 'getBindWx');
          return false;
        }
      },
      async getWxStatus() {
        try {
          let res = await getBindWxStatus();
          console.log('getBindWxStatus: ', res);
          if (res.code == 0) {
            this.isBindWx = res.data;
          }
        } catch (e) {
          console.log(e, 'getBindWxStatus');
          return false;
        }
      },
      HandleUnbind() {
        this.$refs.UnbindDialog.open();
      },
      linkToPage(url) {
        this.$tab.navigateTo(url);
      },
      // platformDashboard() {
      //   this.$tab.navigateTo('/packageA/pages/dashboard/index');
      // },
      // dispatchingDashboard() {
      //   this.$tab.navigateTo('/packageA/pages/dispatching/index');
      // },
      handleBind() {
        this.$refs.bindDialog.open();
      },
      handleToLogin() {
        this.$tab.reLaunch('/pages/login');
      },
      handleToAvatar() { },
      openPrivacyContract() {
        wx.openPrivacyContract({
          success: (res) => {
            console.log('openPrivacyContract success');
          },
          fail: (res) => {
            console.error('openPrivacyContract fail', res);
          }
        });
      },
      editPwdManage() {
        this.$tab.navigateTo();
      },
      handleLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/pages/login');
          });
        });
      },
      handleToBlackList() { },
      handleTovialation() { },
      handleJiaoLiuQun() {
        this.$modal.showToast('微信搜索 naidaguo 后，添加好友后拉你进技术交流群');
      },
      handleBuilding() {
        this.$modal.showToast('模块建设中~');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mine-container {
    width: 100%;
    height: 100%;
    font-size: 26.66rpx;

    .back-img-box {
      width: 100vw;
      height: 200px;
      background-color: #eeeeee;
      position: absolute;
      z-index: -1;
    }

    .more-icon {
      .iconfont {
        position: relative;
        top: 39rpx;
        right: -8rpx;
      }
    }

    button {
      height: 30px !important;
      line-height: 30px !important;
      position: absolute;
      right: 17rpx;
    }

    .header-section {
      padding: 15px 15px 45px 15px;
      color: white;

      .login-tip {
        font-size: 32rpx;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;
      }

      .user-info {
        margin-left: 15px;
        font-size: 24.88rpx;

        .u-title {
          line-height: 30px;
          font-weight: bold;
          font-size: 32rpx;
        }

        .u-title-fu {
          line-height: 30px;
        }
      }
    }
  }
</style>